<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 属性(HTML属性  属性名="属性值") 写在标签内,和标签名以一个空格分隔的叫做属性 -->
    <div id="box" class="one two three" title="hello"></div>
</body>
<script>

    // 属性节点 依存于 元素节点 => 一般通过元素节点获取属性节点

    var box = document.getElementById("box");
    console.log(box);

    // Element.getAttributeNode(attrName)  根据属性名获取属性节点
    // var attrId = box.getAttributeNode("id");
    // console.log(attrId, typeof attrId);
    // console.log(attrId.nodeName);  // 属性节点的名称 (只能获取)
    // console.log(attrId.nodeValue); // 属性节点的值 (获取和设置)

    // attrId.nodeValue = "BOX";


    // var attrClass = box.getAttributeNode("class");
    // console.log(attrClass, typeof attrClass);
    // console.log(attrClass.nodeName);  // 属性节点的名称
    // console.log(attrClass.nodeValue); // 属性节点的值
    // attrClass.nodeValue = "first second third";
    // console.log(box);


    // Element.getAttribute(attrName)             根据属性名获取属性值
    // Element.setAttribute(attrName,attrValue)   根据属性名设置属性值 (没有就新增 有就修改)
    // Element.removeAttribute(attrName)          根据属性名删除属性

    // var id = box.getAttribute("id");
    // console.log(id);

    // var cls = box.getAttribute("class");
    // console.log(cls);

    // var title = box.getAttribute("title");
    // console.log(title);

    // var result = box.setAttribute("id", "BOX");
    // console.log(result);
    // console.log(box);

    // box.setAttribute("class", "first second third");
    // box.setAttribute("title", "你好");

    // var result = box.removeAttribute("id");
    // console.log(result);
    // console.log(box);


    // 还可以设置自定义属性







</script>

</html>